<template>
<div class="pay-detail abs full">
	<div class="rel pay-detail-wrap">
		<div class="pay-detail-header">
			支付金额<span>-{{payDet.cost}}元</span>
		</div>
		<div class="pay-detail-content">
			<p>类型<span>支出</span></p>
			<p>时间<span>{{payDet.time}}</span></p>
			<p>交易单号<span>{{payDet.tradeNo}}</span></p>
			<p>备注<span>{{payDet.attachment}}</span></p>
		</div>
	</div>
</div>
</template>

<script>
export default {
	name: 'pay-detail',
	data() {
		return {
			payDet: {}
		}
	},
	mounted() {
		// 为方便调试把this暴露在Vue原型链下
		this.$pages.payDetail = this;
	},
	activated() {
		document.title = '支付明细';
		this.payDet = this.getPayDet();
	},
	deactivated() {
		this.payDet = {};
	},
	methods: {
		getPayDet() {
			return this.$route.params.pDetail
		}
	}
}
</script>

<style scoped>
.pay-detail {
	background-color: #f0eef4;
}

.pay-detail .pay-detail-wrap {
	height: 4.25rem;
	width: 100%;
	background-color: #fff;
	border-bottom: 0.01rem solid #d8d8d8;
}

.pay-detail-header {
	height: 1.57rem;
	width: 7.18rem;
	margin-left: 0.3rem;
	font-size: 0.32rem;
	line-height: 1.57rem;
	border-bottom: 0.01rem solid #d8d8d8;
}

.pay-detail-header span {
	font-size: 0.44rem;
	color: #1b1b20;
	float: right;
	margin-right: 0.3rem;
}

.pay-detail-content {
	margin-left: 0.3rem;
	margin-top: 0.16rem;
}

.pay-detail-content p {
	margin: 0;
	font-size: 0.28rem;
	color: #888;
	line-height: 0.58rem;
}

.pay-detail-content p span {
	float: right;
	margin-right: 0.3rem;
}
</style>
